import { onMounted, reactive, ref } from 'vue'

/** ElPopover */
export interface Popover {
  doShow: () => void
  doClose: () => void
}

/** 弹出层控件 */
export default function usePopover(emit: (event: string) => void) {
  /** 弹出层 */
  const popover = ref(null as Popover | null)

  /** 打开 */
  function open() {
    setTimeout(() => popover.value?.doShow(), 1)
  }

  onMounted(open)

  return reactive({
    /** 弹出层 */
    popover,

    /** 打开 */
    open,

    /** 关闭 */
    close() {
      popover.value?.doClose()
    },

    /** popover 隐藏 */
    afterClose() {
      emit('close')
    }
  })
}
